@defulat-body-bg: url(../img/bg_body.png) repeat;
@default-color: #7b7a6d;
@default-font: Myriad Pro;

/* ====== Navigations ======= */
@default-nav-top-bg: #272a2c;
@default-nav-bottom-bg: #202224;
@default-nav-color: #e6e3bb;
@default-nav-color-hover: #8e4423;
@default-nav-font-size: 14px;
@default-dropdown-top-bg: #222527;
@default-dropdown-bottom-bg: #272627;

/* ========= Footer ======== */
@default-search-field-top: #1b1d1e;
@default-search-field-bottom: #232528;
@default-search-button-top: #9f4e28;
@default-search-button-bottom: #813c1f;
@default-devider-top-bg: #a4512a;
@default-devider-bottom-bg: #78371c;
@default-footer-field-top-bg: #232628;
@default-footer-field-bottom-bg: #2a2d2f;
/* ========= Work Section ============= */
@default-bg-color: #242729;
@default-bg-color-top-button: #3c3f40;

@default-steps-top-button: #3b4043;
@default-steps-bottom-button: #202324;

.linear-gradinet(@from-color, @from-pos, @to-color, @to-pos)
{
    background: url();
    background: -moz-linear-gradient(top,  @from-color @from-pos, @to-color @to-pos);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@from-pos,@from-color), color-stop(@to-pos,@to-color));
    background: -webkit-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos);
    background: -o-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos);
    background: -ms-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos);
    background: linear-gradient(to bottom,  @from-color @from-pos,@to-color @to-pos);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{from-color}', endColorstr='@{to-color}',GradientType=0 );
}

body
{
    font-family: @default-font;
    background: @defulat-body-bg;
}

.wrapper
{
    width: 960px;
    margin: 0 auto;

    header
    {
        font-size: @default-nav-font-size;
        border-radius: 0 0 10px 10px;
        .linear-gradinet(@default-nav-top-bg,0%,@default-nav-bottom-bg,100%);
        padding: 20px;

        #logo
        {
            font-size: 30px;
            text-decoration: none;
            color: @default-nav-color;
            float: left;
            overflow: hidden;
            padding: 0 15px 0 0;
            border-right: 1px solid @default-nav-color;
        }

        .nav
        {
            display: inline-block;
        }

        .nav-pills li a
        {
            color: @default-nav-color;

            &:hover
            {
                background: none;
                color: @default-nav-color-hover;
            }
             &:focus
            {
                color: @default-nav-color-hover;
                background: none;
            }
             &:active
            {
                color: @default-nav-color-hover;
                background: none;
            }
            &:vlink
            {
                color: @default-nav-color-hover;
                background: none;
            }
        }

        .dropdown-menu
        {
            margin: 15px 0 0 -10px;
            padding: 15px 30px 20px  20px;
            .linear-gradinet(@default-dropdown-top-bg,0%,@default-dropdown-bottom-bg,100%);
            opacity: 0.9;
            border-top: 1px solid #34383a;

            .topArrow
            {
                width: 14px;
                height: 7px;
                background: url(../img/bg_dropdown.png) no-repeat;
                position: absolute;
                top: -7px;
                left: 35px;
            }

            & li
            {
                display: block;
            }

            & li a
            {
                color: @default-color;
                padding: 5px 110px 5px 0;

                &:hover
                {
                    color: @default-nav-color;
                }
            }
            .borderTop
            {
                border-top: 1px solid #3a3a3a;
            }

            .borderBottom
            {
                border-bottom: 1px solid #010101;
            }
        }

        .navbar-form
        {
            float: right !important;
        }

        .form-control
        {
            width:180px;
            height: 30px;
            border: none;
            .linear-gradinet(@default-search-field-top,0%,@default-search-field-bottom,100%);
            border-bottom: 1px solid #3f4245;
            font-size: @default-nav-font-size;

            &:focus
            {
                box-shadow: none;
            }
        }

        .btn
        {
            .linear-gradinet(@default-search-button-top,0%,@default-search-button-bottom,100%);
            border:none;
            border-top: 1px solid #b57657;
            color: @default-nav-color;
            margin: 0 0 0 10px;
            padding: 4px 8px;
        }
    }

    .devider
    {
        height: 10px;
        .linear-gradinet(@default-devider-top-bg,0%,@default-devider-bottom-bg,100%);
        border-top: 1px solid #b56d4b;
    }

    footer
    {
        overflow: hidden;

    .textBoxAndImage
    {
        padding: 15px 20px 25px 20px;
        background: url(../img/bg_text_and_image.png) no-repeat @default-bg-color bottom;
        overflow: hidden;
         & h1
        {
            color: @default-nav-color-hover;
            font-size: 18px;
            margin: 0 0 10px 0;

            & span
            {
                font-weight: bold;
            }
        }
    }

    .textBoxAndImageLeft
    {
        width: 425px;
        padding: 20px 20px 30px 0;
        border-right: 1px solid #6e3b25;
        position: relative;
        float: left;

        & p
        {
            color:@default-color;
            font-face: @default-font;
            font-szie: 13px;
            line-height: 15px;
        }

        & img
        {
            width: 145px;
            height: 95px;
            border: 5px solid @default-nav-color-hover;
            float: right;
            margin: 5px 0 0 0;
            padding: 0px;
        }
    }

    .glyphicon-record
    {
        color: #6e3b25;
        position: absolute;
        right: -7px;
        top: 50%;
        margin-top: -7px;
    }

    .textBoxAndImageRight
    {
        float: left;
        overflow: hidden;
        padding: 20px 0 30px 20px;

        .col-lg-6
        {
            padding: 0px;
            margin: 0 0 25px 0;

            .input-group
            {
                width: 280px;
                border: 1px solid #3f3e3d;
                border-radius: 5px;
                .linear-gradinet(@default-footer-field-top-bg,0%,@default-footer-field-bottom-bg,100%);
                padding: 1px;

                .form-control
                {
                    background: none;
                    border: none;
                    margin: 0px;
                    padding: 0 5px;
                    width: 220px;
                    font-family: @default-font;
                    font-color: @default-color;
                    font-size: 14px;

                    &:focus
                    {
                        box-shadow: none;
                    }
                }

                .btn-default
                {
                    border-radius: 5px !important;
                    .linear-gradinet(@default-search-button-top,0%,@default-search-button-bottom,100%);
                    width: 80px;
                    height: 35px;
                    border: none;
                    border-top: 1px solid #b57657;
                    color: @default-nav-color;
                    margin: 0 0 0 10px;
                    padding: 4px 8px;
                }
            }
        }

        .lastTwits
        {
            clear: both;
            margin-top: 25px;
            overflow: hidden;

            .twitsLeftBox
            {
                position: relative;
                width: 60px;
                height: 70px;
                border: 1px solid #3f3e3d;
                border-radius: 5px;
                background: url(../img/bg_bird.png) no-repeat center 30%;
                float: left;
                overflow: hidden;
                margin: 0 10px 0 0;

                .btn-danger
                {
                    position: absolute;
                    display: block;
                    height: 20px;
                    line-height: 20px;
                    width: 56px;
                    bottom: 1px;
                    left: 1px;
                    right: 1px;
                    .linear-gradinet(@default-search-button-top,0%,@default-search-button-bottom,100%);
                    border: none;
                    border-top: 1px solid #b57657;
                    color: @default-nav-color;
                    padding: 0;
                    margin: 0;
                    text-align: center;
                }
            }

            .twitsRightBox
            {
                position: relative;
                border: 1px solid #3f3e3d;
                border-radius: 5px;
                padding: 14px 9px;
                display: inline-block;
                width: 405px;
                font-size: 14px;
                font-family: @default-font;
                color: @default-color;

                & span
                {
                    color: @default-nav-color;
                }

                .btn-lg
                {
                    background: none;
                    border: none;
                    padding: 0;
                }

                .glyphicon-retweet
                {
                    background: #43474a;
                    color: #303334;
                    padding: 3px 2px 0 0;
                    border-radius: 5px;
                    width: 25px;
                    height: 25px;
                    position: absolute;
                    top: 41px;
                    right: 2px;
                }
            }
        }
    }

    .footerContent
    {
        background: @default-nav-color;
        overflow: hidden;
        padding: 25px 20px 40px 20px;
        border-bottom: 2px solid #b3b091;

        & h1
        {
            color: @default-nav-color-hover;
            font-size: 18px;
            border-bottom: 1px solid @default-color;
            margin: 0px;
            padding: 0 0 10px 10px;
        }

        .flickr
        {
            width: 275px;
            float: left;
            overflow: hidden;
        }

        .flickr_badge_image
        {
            float: left;
            overflow: hidden;
            width: 62px;
            height: 62px;
            border: 5px solid @default-nav-color-hover;
            margin: 9px 9px 0 0;
        }

        #flickr_badge_image4
        {
            margin-right: 0px;
        }

         #flickr_badge_image8
        {
            margin-right: 0px;
        }

        .featureClients
        {
            width: 200px;
            float: left;
            overflow: hidden;
            margin: 0 39px;
            text-align: center;
        }

        .theNew
        {
            margin-top: 9px;
        }

        .cocaCola
        {
            margin-top: 12px;
        }

        .pixar
        {
            margin-top: 15px;
        }

        .ducati
        {
            margin-top: 19px;
        }
    }

    .ourFriends
    {
        width: 195px;
        float: left;
        overflow: hidden;
        text-align: center;

        & ul
        {
            padding: 0px;
            margin: 0px;

            & li
            {
                list-style: none;
                margin: 9px 0 0 0;

                & a
                {
                    text-decoration: none;
                    color: @default-color;
                    font-family: @default-font;
                    font-size:@default-nav-font-size;
                }
            }
        }
    }

    .pages
    {
        width: 133px;
        float: right;
        overflow: hidden;
        text-align: center;

        & ul
        {
            padding: 0px;
            margin: 0px;

            & li
            {
                list-style: none;
                margin: 9px 0 0 0;

                & a
                {
                    text-decoration: none;
                    color: @default-color;
                    font-family: @default-font;
                    font-size:@default-nav-font-size;
                }
            }
        }
    }

    .footerCopyright
    {
        padding: 20px 22px 20px 25px;
        background: @default-bg-color;
        color: #725142;
        overflow: hidden;
        border-radius: 0 0 10px 10px;

        & ul
        {
            padding: 0;
            margin: 0;
            float: right;
            overflow: hidden;

            & li
            {
                list-style: none;
                display: inline-block;
                margin-left: 15px;
                padding: 0;

                &:before
                {
                    content: " / ";
                    margin-right: 15px;
                }

                &:first-child
                {
                    margin-left: 0;
                    &:before
                    {
                        content: none;
                    }
                }

                & a
                {
                    text-decoration: none;
                    color: #725142;
                }
            }
        }
    }
}

.workSections
    {
        background: @default-bg-color;
        border-radius: 10px 10px 0  0;
        padding: 40px 10px 70px 10px;

        & .mainArticle
        {
            border-bottom: 1px solid #393b3d;
            padding: 0 25px 30px 10px;
            margin: 0 0 25px 0;
            overflow: hidden;

            & .articleImg
            {
                width: 400px;
                float: left;
                overflow: hidden;
                padding: 1px 0 0 0;
                margin: 0;

                 & img
                {
                border-top: 4px solid @default-nav-color-hover;
                border-left: 5px solid @default-nav-color-hover;
                border-right: 5px solid @default-nav-color-hover;
                border-bottom: 5px solid @default-nav-color-hover;
                box-shadow: 0px  -1px 0px #a76d53;
                float: left;
                width: 110px;
                height: 88px;
                margin: 0 0 0 20px;

                    &:first-child
                    {
                        margin-left: 0;
                    }
                }
            }

            & .articleText
            {
                width: 480px;
                float: right;
                overflow: hidden;
                padding: 0;
                background: url(../img/bg_article_text.png) no-repeat left top;

                & h1
                {
                    color: @default-nav-color-hover;
                    font-size: 18px;
                    font-family: @default-font;
                    padding: 0;
                    margin: 0 0 5px 35px;
                }

                & h2
                {
                    color: #646363;
                    font-size: 12px;
                    font-family: @default-font;
                    font-style: italic;
                    padding: 0;
                    margin: 0 0 15px 35px;
                }

                & p
                {
                    color: @default-color;
                    font-family: @default-font;
                    font-size: 13px;
                }
            }
        }
    }
    .mainStepsSlider
    {
        background: @default-nav-color;
        padding: 55px 20px 35px 20px;
    }

        .devider
        {
            width: 100%;
            background: #e6e3bb;
            position: relative;

            .first
    {
        width: 350px;
        height: 10px;
        position: relative;
        background: #a04f29;
        float: left;
    }

    .first:after
    {
        content: "";
        border-top: 13px solid #a04f29;
        border-bottom: none;
        border-left: 6px solid #e6e3bb;
        border-right: 6px solid #e6e3bb;
        position: absolute;
        right: 0;
        top: 10px;
    }

    .seccond
    {
        width: 260px;
        height: 10px;
        position: relative;
        background: #a04f29;
        float: left;
    }

    .seccond:before
    {
        content: "";
        border-top: none;
        border-bottom: 6px solid #e6e3bb;
        border-left: 3px solid #a04f29;
        border-right: 5px solid #a04f29;
        position: absolute;
        left: 0;
        top: 4px;
    }

    .seccond:after
    {
        content: "";
        border-top: none;
        border-bottom: 6px solid #e6e3bb;
        border-left: 5px solid #a04f29;
        border-right: 3px solid #a04f29;
        position: absolute;
        right: 0;
        top: 4px;
    }

    .third
    {
        width: 350px;
        height: 10px;
        position: relative;
        background: #a04f29;
        float: right;
    }

    .third:before
    {
        content: "";
        border-top: 13px solid #a04f29;
        border-bottom: none;
        border-left: 6px solid #e6e3bb;
        border-right: 6px solid #e6e3bb;
        position: absolute;
        left: 0;
        top: 10px;
    }
        }
        .mainSteps
        {
            padding: 0 50px;
        }
        .steps
        {
            width: 220px;
            float: left;
            text-align: center;
            position: relative;
            margin: 0 0 60px 80px;

            &:first-child
            {
                margin-left: 0;
            }

            .stepsButton
            {
                color: @default-nav-color;
                font-family: @default-font;
                font-szie: @default-nav-font-size;
                .linear-gradinet(@default-steps-top-button,0%,@default-steps-bottom-button,100%);
                border-top: 1px solid #7e8183;
                box-shadow: 0px -1px 0px @default-bg-color;
                border-radius: 10px;
                padding: 10px 15px 12px 15px;

            }

        & h1
        {
            color: @default-nav-color-hover;
            font-size: 18px;
            text-transform: uppercase;
            font-family: @default-font;
        }

        & p
        {
            font-family: @default-font;
            font-size: @default-nav-font-size;
            color: @default-color;
        }

        & img
        {
            position: absolute;
            left: 50%;
            margin-left: -55px;
            top: -130px
        }
    }

     .slider
    {
        width: 920px;
        padding-top: 50px;
        position: relative;
        overflow: hidden;

        .carousel
        {
            width: 100%;
            background: @default-bg-color;
            border: 1px solid #4D5051;
            border-radius: 10px 10px 0 0;
            box-shadow: 0 -1px 0 #73725E;
            padding: 35px 0;
        }

        .carousel-control
        {
            opacity: 1 !important;
            width: 38px !important;
            height: 38px !important;
            top: 50% !important;
            z-index: 9;
        }

    .left
    {
        background: url(../img/left_arrow.png) no-repeat !important;
        left:10px !important;
    }

    .left:hover
    {
        background: url(../img/left_arrow_hover.png) no-repeat !important;
        opacity: 1;
    }

    .right
    {
        background: url(../img/right_arrow.png) no-repeat !important;
        right:10px !important;
    }

    .right:hover
    {
        background: url(../img/right_arrow_hover.png) no-repeat !important;
        opacity: 1;
    }

    .carousel-indicators
    {
        position: absolute;
        top: -35px;
        left: 50%;
        margin-left: -165px !important;

        & li
        {
            background: @default-bg-color !important;
            border-top: 1px solid #7c7e7f !important;
            border-bottom: 1px solid #121415 !important;
            border-left: 1px solid #73725e !important;
            border-right: 1px solid #3a392f !important;
            border-radius: 10px 10px 0 0 !important;
            color: #5B5B5B;
            display: block;
            float: left;
            overflow: hidden;
            font-family: @default-font;
            font-size: 12px;
            text-indent: 0 !important;
            padding: 7px 25px !important;
            width: auto !important;
            height: auto !important;
            margin:0 !important;
            position: relative;

            &.active
            {
                display: block !important;
                padding: 14px 35px 14px 35px !important;
                color: @default-nav-color !important;
                top: -9px !important;
                font-size: 14px !important;
                font-family: @default-font !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;
                .linear-gradinet(@default-bg-color-top-button,0%,@default-bg-color,100%) !important;
            }
        }
    }

    .sliderElements
    {
        width: 330px;
        background: url(../img/bg_slider_elements.png) no-repeat left 5px;

        .leftElemets
        {
            float: left;
            overflow: hidden;
            margin: 0 0 0 120px;
        }

        .rightElements
        {
            float: right;
            overflow: hidden;
            margin: 0 110px 0 0;
        }

        & h1
        {
            font-size: 18px;
            color: @default-nav-color-hover;
            font-family: @default-font;
            margin: 0 0 0 30px;
        }

        & h2
        {
            font-size: 12px;
            color: #646363;
            font-family: @default-font;
            margin: 0 0 0 30px;
            font-style: italic;
        }

        & p
        {
            color: @default-color;
            font-size: 14px;
            font-family: @default-font;
            font-weight: bold;

            &:before
            {
                content:url(../img/bg_before_after.png);
                margin-right: 10px;
            }

            :after
            {
                content:url(../img/bg_before_after.png);
                margin-left: 10px;
            }
        }
    }
    }
}